<template>
  <div class="about">
    <h1>考勤员{{ attender.name }},你好！</h1>


  </div>
  <a :class="{ active: selected == 1 }" @click="selected = 1" :href="'/attender/' + this.attender.id + '/attend'">考勤</a>
  <a :class="{ active: selected == 2 }" @click="selected = 2"
    :href="'/attender/' + attender.id + '/class_attend_lists'">本班考勤表列表链接</a>
  <a :class="{ active: selected == 3 }" @click="selected = 3"
    :href="`/attender/${this.attender.id}/class_toplist`">本班学生考勤排行链接</a>

  <router-view />
</template>
<script>
import { computed } from 'vue'
import { mapActions, mapState } from 'pinia'
import { useAttenderStore } from '../../stores/attender'

export default {
  inject: ['axios'],
  methods: { ...mapActions(useAttenderStore, ['fetchAttender']) },
  async created() {
    await this.fetchAttender(this.$route.params.id);
  },
  computed: {
    ...mapState(useAttenderStore, ["attender"])
  },
  data() {
    return {
      selected: 2
    }
  }

}

</script>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
../../stores/attender